import {observer} from 'mobx-react-lite';
import {Path} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {SvgCommon} from './Common';
import {IconProps} from './types';

export const SvgHeart = observer((props: IconProps) => {
  const {colorKey = 'color_31'} = props;
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props}>
      <Path
        d="M12.9084 4.21696C15.4797 2.37201 19.0259 2.63217 21.3151 4.94773C22.5453 6.19296 23.2366 7.8903 23.2366 9.66071C23.2366 11.4311 22.5448 13.1285 21.3161 14.3727L14.5925 21.2127C14.3563 21.461 14.0722 21.6587 13.7573 21.7941C13.4425 21.9294 13.1034 21.9994 12.7607 22C12.4196 21.9997 12.0821 21.9305 11.7685 21.7963C11.4548 21.6622 11.1716 21.466 10.9358 21.2195L4.20587 14.3674C2.97818 13.1221 2.28784 11.4262 2.28784 9.65779C2.28784 7.88932 2.97818 6.19296 4.20636 4.94724C6.53508 2.59173 10.1665 2.36324 12.7476 4.31635L12.7603 4.32609L12.9084 4.21696ZM20.2755 5.97471C18.3429 4.02014 15.2707 3.95047 13.2572 5.81589L12.7603 6.27578L12.2643 5.81589C10.2503 3.95047 7.17815 4.02014 5.24649 5.97422C4.28918 6.94468 3.74938 8.27176 3.74938 9.6573C3.74938 11.0433 4.28918 12.3704 5.24746 13.3418L11.9852 20.2023C12.1917 20.4181 12.4709 20.5385 12.7607 20.5385C13.0506 20.5385 13.3298 20.4181 13.5432 20.195L20.2745 13.3467C21.2338 12.3762 21.7745 11.0482 21.7745 9.66071C21.7745 8.27371 21.2343 6.94517 20.2755 5.97471Z"
        fill={getColorStr(theme, colorKey)}
      />
    </SvgCommon>
  );
});

export const SvgHeartFill = observer((props: IconProps) => {
  const {colorKey = 'color_1'} = props;
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props}>
      <Path
        d="M12.1523 4.21696C14.7236 2.37201 18.2698 2.63217 20.559 4.94773C21.7892 6.19296 22.4805 7.8903 22.4805 9.66071C22.4805 11.4311 21.7887 13.1285 20.56 14.3727L13.8364 21.2127C13.6002 21.461 13.3161 21.6587 13.0012 21.7941C12.6864 21.9294 12.3473 21.9994 12.0046 22C11.6635 21.9997 11.326 21.9305 11.0124 21.7963C10.6987 21.6622 10.4155 21.466 10.1797 21.2195L3.44977 14.3674C2.22207 13.1221 1.53174 11.4262 1.53174 9.65779C1.53174 7.88932 2.22207 6.19296 3.45025 4.94724C5.77897 2.59173 9.41041 2.36324 11.9915 4.31635L12.0042 4.32609L12.1523 4.21696Z"
        fill={getColorStr(theme, colorKey)}
      />
    </SvgCommon>
  );
});
